<template>
    <div class="PC">
        <el-dialog
            v-model="data.dialogVisible"
            :title="data.title"
            width="500"
        >
       <div v-if="title=='添加员工'">
        <el-form  :model="addFormInline" class="demo-form-inline">
            <el-form-item label="姓名">
                <el-input v-model="addFormInline.username" placeholder="请输入姓名" clearable />
            </el-form-item>
            
            <el-form-item label="工号">
                <el-input v-model="addFormInline.id" placeholder="请输入工号" clearable />
            </el-form-item>

            

            <el-form-item label="手机号">
                <el-input v-model="addFormInline.phone" placeholder="请输入手机号" clearable />
            </el-form-item>

            <el-form-item label="岗位">
                <el-input v-model="addFormInline.employeestype" placeholder="请输入部门" clearable />
            </el-form-item>
            <el-form-item label="部门">
                <el-radio-group v-model="radio">
                    <el-radio :value="3">员工</el-radio>
                    <el-radio :value="6">经理部</el-radio>
                    <el-radio :value="9">管理部</el-radio>
                </el-radio-group>
            </el-form-item>
         </el-form>
       </div>
            <div v-else>
                    <li style="padding: 30px 10px; "><span style="font-weight: 800;">姓名:</span>{{ data.data.username }}</li>
                    <li style="padding: 30px 10px; "><span style="font-weight: 800;">工号:</span>{{ data.data.id }}</li>
                    <li style="padding: 30px 10px; "><span style="font-weight: 800;">手机号:</span>{{ data.data.phone }}</li>
                    <li style="padding: 30px 10px; "><span style="font-weight: 800;">岗位:</span>{{ data.data.employeestype }}</li>
                    <li style="padding: 30px 10px; "><span style="font-weight: 800;">部门:</span>{{ data.data.department }}</li>
            </div>
            
            <template #footer>
            <div class="dialog-footer">
                <el-button @click="colses">取消</el-button>
                <el-button type="primary" @click="sure">
                确认
                </el-button>
            </div>
            </template>
        </el-dialog>
    </div>

    <div class="move">
        <el-dialog
            v-model="data.dialogVisible"
            :title="data.title"
            width="80vw"
        >
       <div v-if="title=='添加员工'">
        <el-form  :model="addFormInline" class="demo-form-inline">
            <el-form-item label="姓名">
                <el-input v-model="addFormInline.username" placeholder="请输入姓名" clearable />
            </el-form-item>
            
            <el-form-item label="工号">
                <el-input v-model="addFormInline.id" placeholder="请输入工号" clearable />
            </el-form-item>

            

            <el-form-item label="手机号">
                <el-input v-model="addFormInline.phone" placeholder="请输入手机号" clearable />
            </el-form-item>

            <el-form-item label="岗位">
                <el-input v-model="addFormInline.employeestype" placeholder="请输入部门" clearable />
            </el-form-item>
            <el-form-item label="部门">
                <el-radio-group v-model="radio">
                    <el-radio :value="3">员工</el-radio>
                    <el-radio :value="6">经理部</el-radio>
                    <el-radio :value="9">管理部</el-radio>
                </el-radio-group>
            </el-form-item>
         </el-form>
       </div>
            <div v-else>
                    <li style="padding: 5px 10px; "><span style="font-weight: 800;">姓名:</span>{{ data.data.username }}</li>
                    <li style="padding: 5px 10px; "><span style="font-weight: 800;">工号:</span>{{ data.data.id }}</li>
                    <li style="padding: 5px 10px; "><span style="font-weight: 800;">手机号:</span>{{ data.data.phone }}</li>
                    <li style="padding: 5px 10px; "><span style="font-weight: 800;">岗位:</span>{{ data.data.employeestype }}</li>
                    <li style="padding: 5px 10px; "><span style="font-weight: 800;">部门:</span>{{ data.data.department }}</li>
            </div>
            
            <template #footer>
            <div class="dialog-footer">
                <el-button @click="colses">取消</el-button>
                <el-button style="background-color: #253963; color: #fff;" @click="colses">
                确认
                </el-button>
            </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">

import {ref,reactive} from 'vue'
const data=defineProps(['data','title','dialogVisible'])

const dialogVisible=ref(data.dialogVisible)
const emit=defineEmits(['change','tijiao'])
const radio=ref(3)
const colses=()=>{
    emit('change',false)
}

export interface addFormInlineTS{
    username:string,
    phone:string,
    id:string,
    department:string,
    employeestype:string
}

const addFormInline = reactive<addFormInlineTS>({
  username: '',
  phone: '',
  id: '', // 工号（必填，否则后端可能报错）
  department: '',
  employeestype: '' // 岗位（必填，否则类型不匹配）
});

const sure=()=>{
    let department=ref('员工')
    if (radio.value==3) {
        department.value='员工'
    }else if(radio.value==6){
        department.value='经理部'
    }else{
        department.value='管理部'
    }
   
    
    const addData={
        username:addFormInline.username,
        phone: addFormInline.phone,
        id:addFormInline.id,
        department:department.value,
        employeestype:addFormInline.employeestype
    }
    
    emit('tijiao',addData)
}




</script>

<style scoped>

@media (max-width:1000px) {
  .PC{
    display: none;
  }
  .move{
    display: block;
  }
}
@media (min-width:1000px) {
  .PC{
    display: block;
  }
  .move{
    display: none;
  }
}

</style>